<template>
  <div style="margin-top: 20px">
    <el-carousel :interval="4000" type="card" height="500px">
      <el-carousel-item>
        <img src="@/assets/imgs/轮播图01.jpeg" alt="" style="width: 100%; height: 500px">
      </el-carousel-item>
      <el-carousel-item>
        <img src="@/assets/imgs/轮播图02.jpeg" alt="" style="width: 100%; height: 500px">
      </el-carousel-item>
      <el-carousel-item>
        <img src="@/assets/imgs/轮播图03.jpeg" alt="" style="width: 100%; height: 500px">
      </el-carousel-item>
    </el-carousel>
    <div style="width: 60%; margin: 40px auto; min-height: 400px; border-bottom: 4px solid #eeeeee ;padding: 50px">
      <div style="display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; ">
        <div style="width: 150px" @click="navTo('/front/addFriend')">
          <img src="@/assets/imgs/加好友.png" alt="" style="width: 150px; height: 150px"/>
          <div style="font-size: 24px; font-weight: bold; text-align: center">添加好友</div>
        </div>
        <div style="width: 150px" @click="navTo('/front/friendList')">
          <img src="@/assets/imgs/好友列表.png" alt="" style="width: 150px; height: 150px"/>
          <div style="font-size: 24px; font-weight: bold; text-align: center">好友列表</div>
        </div>
        <div style="width: 150px" @click="navTo('/front/myFriendApply')">
          <img src="@/assets/imgs/好友申请.png" alt="" style="width: 150px; height: 150px"/>
          <div style="font-size: 24px; font-weight: bold; text-align: center">我的好友申请</div>
        </div>
        <div style="width: 150px" @click="navTo('/front/friendApply')">
          <img src="@/assets/imgs/好友申请.png" alt="" style="width: 150px; height: 150px"/>
          <div style="font-size: 24px; font-weight: bold; text-align: center">添加我的好友申请</div>
        </div>
        <div style="width: 150px; position: relative" @click="navTo('/front/shareFile')">
          <img src="@/assets/imgs/接收文件.png" alt="" style="width: 150px; height: 150px"/>
          <div style="font-size: 24px; font-weight: bold; text-align: center">接收文件</div>
          <div style="background-color: red; color: #eeeeee; font-weight: bold; position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 15px; text-align: center; line-height: 30px" v-if="data.isRead !== 0">{{data.isRead}}</div>
        </div>
        <div style="width: 150px" @click="navTo('/front/transferStation')">
          <img src="@/assets/imgs/文件中转站.png" alt="" style="width: 150px; height: 150px"/>
          <div style="font-size: 24px; font-weight: bold; text-align: center">我的中转站</div>
        </div>
		<div style="width: 150px; position: relative" @click="navTo('/front/fileEncryptor')">
		  <img src="@/assets/imgs/加密.png" alt="" style="width: 150px; height: 150px"/>
		  <div style="font-size: 24px; font-weight: bold; text-align: center">加密文件</div>
		</div>
		<div style="width: 150px; position: relative" @click="navTo('/front/fileDecryptor')">
		  <img src="@/assets/imgs/解密.png" alt="" style="width: 150px; height: 150px"/>
		  <div style="font-size: 24px; font-weight: bold; text-align: center">解密文件</div>
		</div>
		<div style="width: 150px; position: relative" @click="navTo('/front/fileSignatureVerifier')">
		  <img src="@/assets/imgs/sign.png" alt="" style="width: 150px; height: 150px"/>
		  <div style="font-size: 24px; font-weight: bold; text-align: center">签名验证</div>
		</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue"
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete, Edit} from "@element-plus/icons-vue";
const baseUrl = import.meta.env.VITE_BASE_URL
const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  tableData: [],
  total: 0,
  pageNum: 1,  // 当前的页码
  pageSize: 5,  // 每页的个数
  formVisible: false,
  form: {},
  ids: [],
  userName: null,
  userList: [],
  transferList: [],
  isRead: 0
})
const navTo = (url) => {
  location.href = url
}
// 获取当前登录用户有几个未读的文件
const isReadFile = () => {
  request.get('/shareFile/isReadFile').then(res => {
    if (res.code === '200') {
      data.isRead = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
isReadFile()
</script>
